<template>
  <el-main id="product-list">
    <div class="activityImg pos">
      <div v-for="item of imgList" :key="item.id">
        <a>
          <img :src="item" alt="图片显示失败" />
        </a>
        <div class="internal"></div>
      </div>
    </div>
    <div class="search pos">
      <span>搜索</span>
      <el-input
        class="input"
        v-model="keyword"
        placeholder="请输入搜索关键字"
        suffix-icon="el-icon-search"
      ></el-input>
      <el-button type="primary" size="mini" @click="queryList">查询</el-button>
    </div>
    <div class="choose-condition pos">
      <div>
        <span class="cond">筛选条件</span>
        <span
          class="btn1 btn"
          @click="changeBtn1()"
          :class="btnFlag == 1 ? 'active' : ''"
          >发布</span
        >
        <span
          class="btn2 btn"
          @click="changeBtn2()"
          :class="btnFlag == 2 ? 'active' : ''"
          >未发布</span
        >
      </div>
      <div class="cycle">
        <span>风险评级</span>
        <div class="pro-1">
          <a
            v-for="(item, idex) in proRiskList"
            @click="proAll(item.id)"
            :key="idex"
            :class="{ red: i === item.id }"
            >{{ item.name }}</a
          >
        </div>
      </div>
      <div class="cycle">
        <span>产品周期</span>
        <div class="pro-1">
          <a
            v-for="(item, idex) in proCircleList"
            @click="proAll1(item.id)"
            :key="idex"
            :class="{ red: i1 === item.id }"
            >{{ item.name }}</a
          >
        </div>
      </div>
      <div class="cycle">
        <span>产品类型</span>
        <div class="pro-1">
          <a
            v-for="(item, idex) in proTypeList"
            @click="proAll2(item.id)"
            :key="idex"
            :class="{ red: i2 === item.id }"
            >{{ item.name }}</a
          >
        </div>
      </div>
    </div>
    <div class="love-production pos ">
      <div class="guess">猜你想要</div>
      <div class="guess-1" @click="toDetail">
        <div class="title content">基金一起基金一起基金</div>
        <div class="content num">4.93%</div>
        <div class="content des">年利率年利率年利率</div>
        <div class="content">最下化最小化最小化</div>
      </div>
      <div class="guess-1" @click="toDetail">
        <div class="title content">基金一起基金一起基金</div>
        <div class="content num">4.93%</div>
        <div class="content des">年利率年利率年利率</div>
        <div class="content">最下化最小化最小化</div>
      </div>
      <div class="guess-1" @click="toDetail">
        <div class="title content">基金一起基金一起基金</div>
        <div class="content num">4.93%</div>
        <div class="content des">年利率年利率年利率</div>
        <div class="content">最下化最小化最小化</div>
      </div>
      <div class="guess-1" @click="toDetail">
        <div class="title content">基金一起基金一起基金</div>
        <div class="content num">4.93%</div>
        <div class="content des">年利率年利率年利率</div>
        <div class="content">最下化最小化最小化</div>
      </div>
    </div>
    <div class="production-list pos">
      <el-table :data="financialList" border style="width: 100%">
        <el-table-column
          prop="proType"
          label="产品分类"
          width="50"
        ></el-table-column>
        <el-table-column prop="proName" label="产品名称"></el-table-column>
        <el-table-column
          prop="proProfit"
          label="客户收益率"
          width="90"
        ></el-table-column>
        <el-table-column
          prop="proAmount"
          label="认购起点金额"
          width="70"
        ></el-table-column>
        <el-table-column
          prop="proPerson"
          label="销售对象"
          width="50"
        ></el-table-column>
        <el-table-column
          prop="beginTime"
          label="发布时间起"
          width="130"
        ></el-table-column>
        <el-table-column
          prop="endTime"
          label="发布时间止"
          width="130"
        ></el-table-column>

        <el-table-column label="操作" width="60">
          <template slot-scope="scope">
            <el-button
              @click.native.prevent="toDetail(scope.row)"
              type="text"
              size="small"
              style="color: #06469e;"
            >
              购买
            </el-button>
          </template>
        </el-table-column>

        <el-table-column label="收藏" width="60">
          <template slot-scope="scope">
            <i
              :class="{
                'el-icon-star-on': scope.row.isCollect === '1',
                'el-icon-star-off': scope.row.isCollect === '0'
              }"
              @click="toggle(scope.row)"
              style="font-size: 24px; cursor: pointer;"
            ></i>
          </template>
        </el-table-column>
      </el-table>
      <!--<table
        cellpadding="0"
        cellspacing="0"
        border="1"
        width="898px"
        rules="rows"
      >
        <tr class="title">
          <th class="set-padding">产品分类</th>
          <th>产品名称</th>
          <th>客户收益率</th>
          <th>认购起点金额</th>
          <th>销售对象</th>
          <th>发布时间起</th>
          <th>发布时间止</th>
          <th>产品</th>
          <th>收藏</th>
        </tr>
        <tr
          class="content"
          v-for="(value, index) in financialList"
          :key="index"
        >
          <td @click="toDetail(value)" class="set-padding">
            {{ value.proType }}
          </td>
          <td @click="toDetail(value)">{{ value.proName }}</td>
          <td @click="toDetail(value)">{{ value.proProfit }}</td>
          <td @click="toDetail(value)">{{ value.proAmount }}</td>
          <td @click="toDetail(value)">{{ value.proPerson }}</td>
          <td @click="toDetail(value)">{{ value.beginTime }}</td>
          <td @click="toDetail(value)">{{ value.endTime }}</td>
          <td class="production-buy">
            <button @click="toDetail(value)">购买</button>
          </td>
          <td>
            <i
              v-bind:class="{
                'el-icon-star-on': value.isCollect === '1',
                'el-icon-star-off': value.isCollect === '0'
              }"
              @click="toggle(value)"
            ></i>
          </td>
        </tr>
      </table>-->
    </div>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </el-main>
</template>
<script>
export default {
  data() {
    return {
      total: 100,
      currentPage: 1,
      topImgList: [],
      proRiskList: [
        {
          id: '0',
          name: '全部'
        },
        {
          id: '1',
          name: '低风险'
        },
        {
          id: '2',
          name: '中风险'
        },
        {
          id: '3',
          name: '高风险'
        }
      ],
      proCircleList: [
        {
          id: '0',
          name: '全部'
        },
        {
          id: '1',
          name: '1个月内'
        },
        {
          id: '3',
          name: '1-3个月'
        },
        {
          id: '6',
          name: '3-6个月'
        },
        {
          id: '12',
          name: '6个月-1年'
        }
      ],
      proTypeList: [
        {
          id: '00',
          name: '全部'
        },
        {
          id: '01',
          name: '结构性存款'
        },
        {
          id: '02',
          name: '惠享'
        },
        {
          id: '03',
          name: '私享'
        },
        {
          id: '04',
          name: '养老无忧'
        },
        {
          id: '05',
          name: '金鑫'
        },
        {
          id: '06',
          name: '惠财'
        },
        {
          id: '07',
          name: '点滴成金'
        }
      ],
      pageSize: 10,
      pageNum: 1,
      i: 0,
      i1: 0,
      i2: 0,
      keyword: "",
      btnFlag: "1",
      financialList: [], // 产品列表
      imgList: [] // 最上面图片列表
    };
  },
  methods: {
    toggle(item) {
      let params = {
        id: item.id,
        isCollect: item.isCollect === "0" ? "1" : "0"
      };
      this.$remote(
        "/runtime/pocfinancial/updatePocFinancial.action",
        params
      ).then(() => {
        this.queryList();
      });
    },
    changeBtn1() {
      this.btnFlag = "1";
    },
    changeBtn2() {
      this.btnFlag = "2";
    },
    proAll(index) { // 风险评级
      this.i = index;
      this.queryList()
    },
    proAll1(index) { // 产品周期
      this.i1 = index;
      this.queryList()
    },
    proAll2(index) { // 产品类型
      this.i2 = index;
      this.queryList()
    },
    handleSizeChange(num) {
      this.pageSize = num;
    },
    handleCurrentChange(num) {
      this.$remote(
        "/runtime/pocfinancial/selectPocFinancialListForPage.action",
        {
          pageNum: num,
          pageSize: this.pageSize
        }
      ).then(data => {
        this.financialList = data.list;
        this.pageNum = data.pageNum;
        document.documentElement.scrollTop = document.body.scrollTop = 200;
      });
    },
    toDetail(item) {
      if (item.hasOwnProperty("id")) {
        window.sa.track("$CollectFinancialClick", {
          $element_content: item.id
        });
      }
      this.$router.push({
        name: "ProductDetail",
        params: {
          isHeader: false
        }
      });
    },
    queryList() {
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      if (this.i1) {
        Object.assign(params, { searchCriteria01: this.i1 })
      }
      if (this.i) {
        Object.assign(params, { searchCriteria02: this.i })
      }
      if (this.i2) {
        Object.assign(params, { searchCriteria03: this.i2 })
      }
      console.log('params--', params)
      this.$remote(
        "/runtime/pocfinancial/selectPocFinancialListForPage.action", params).then(data => {
        this.financialList = data.list;
        let arr = data.list.slice(0, 4);
        this.imgList = arr.map(item => {
          return item.picUrl;
        });
        this.total = data.totalCount;
        this.pageNum = data.pageNum;
      });
    }
  },
  mounted() {
    this.queryList();
  }
};
</script>
<style scoped>
#product-list >>> .el-input__inner {
  height: 30px;
  line-height: 30px;
  font-size: 12px;
}
#product-list >>> .el-input__icon {
  line-height: 30px;
}
#product-list >>> .el-button--primary {
  background-color: #06469e;
  border-color: #06469e;
  border-left: none;
}

.el-main {
  padding: 0 0 0 20px;
  flex: 1;
}
.pos {
  text-align: left;
}
.activityImg a {
  display: inline-block;
  width: 210px;
  height: 150px;
}
.activityImg div {
  display: inline-block;
}
.activityImg a img {
  width: 100%;
  height: 100%;
}
.search {
  margin: 10px 0 15px 0;
}
.search span {
  font-size: 16px;
  font-weight: 700;
  padding-left: 20px;
}
.active {
  background-color: #06469e;
  color: white;
}
.search .input {
  display: inline-block;
  width: 250px;
  margin-left: 55px;
}
.search .input input {
  border-radius: 15px;
}

.choose-condition .cond {
  font-size: 16px;
  font-weight: 700;
  padding-left: 20px;
}
.internal {
  width: 20px;
}
.cycle .pro-1 .red {
  color: #06469e;
  border: 1px solid #06469e;
}

.btn {
  box-shadow: none;
  width: 70px;
  height: 28px;
  line-height: 27px;
  text-align: center;
  cursor: pointer;
  border: 1px solid #06469e;
  display: inline-block;
}
.btn1 {
  margin-left: 22px;
  border-radius: 15px 0 0 15px;
}
.btn2 {
  border-radius: 0px 15px 15px 0px;
}

.cycle {
  margin-top: 10px;
  padding-left: 25px;
}
.cycle .pro-1 {
  margin-left: 25px;
  display: inline-block;
}
.cycle .pro-1 a {
  display: inline-block;
  height: 25px;
  border: 1px solid black;
  margin-right: 20px;
  border-radius: 15px;
  padding: 0 9px;
  line-height: 25px;
}

.cycle .pro-1 a:nth-of-type(1) {
  padding: 0 30px;
}
.love-production {
  margin-top: 20px;
}
.love-production .guess,
.guess-1 {
  display: inline-block;
  border: 1px solid grey;
  text-align: center;
}
.love-production .guess-1 {
  width: 198px;
  height: 102px;
  border-left: none;
  vertical-align: top;
  cursor: pointer;
}
.love-production .guess-1 .content {
  width: 100%;
  overflow: hidden;
  word-wrap: nowrap;
  text-overflow: ellipsis;
}
.love-production .guess-1 .title {
  margin-top: 4px;
}
.love-production .guess-1 .num {
  font-size: 16px;
  font-weight: 800;
  color: orange;
  margin-top: 5px;
}
.love-production .guess-1 .des {
  font-size: 12px;
  color: #999;
  margin-bottom: 5px;
}
.love-production .guess {
  font-size: 16px;
  font-weight: 700;
  display: inline-block;
  height: 102px;
  vertical-align: top;
  padding: 5px 20px 0 20px;
}
.content {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.content:hover {
  overflow: visible;
  text-overflow: inherit;
  white-space: wrap;
}
.production-list {
  margin-top: 10px;
}
.production-list .title {
  height: 50px;
}
.production-list .content {
  height: 60px;
}
.production-list .content button {
  width: 50px;
  height: 25px;
  background-color: #06469e;
  border: none;
  color: #fff;
}
.production-list .content i {
  font-size: 20px;
}
.production-list .set-padding {
  padding-left: 10px;
}

.el-icon-search {
  font-weight: 700;
  font-size: 25px;
  vertical-align: center;
  margin-left: 10px;
}
.el-pagination {
  margin: 20px 0;
  text-align: center;
}

.el-icon-star-on {
  color: #06469e;
}
</style>
